<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_Vue实例_生命周期</title>
</head>
<body>
<!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

<div id="demo">
    <button @click="destoryVm">destory vue</button>
    <p v-if="isShow">Vue学习</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
    <p>{{isShow}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#demo",
        data: {
            isShow: true
        },

        //1.初始化阶段
        beforeCreate () {
            console.log('beforeCreate()')
        },

        created () {
            console.log('created()')
        },

        beforeMount () {
            console.log('beforeMount()')
        },

        mounted () {//初始化显示之后立即调用(1次)
            console.log('mounted()')
            this.setIntervalId = setInterval(() => {
                console.log('----')
                this.isShow = !this.isShow
            }, 1000)
        },

        //2.更新阶段
        beforeUpdate () {
            console.log('beforeUpdate()')
        },

        updated () {
            console.log('updated()')
        },

        //3.死亡阶段
        beforeDestroy () {//死亡之前调用(1次)
            console.log('beforeDestroy()')
            //清除定时器
            clearInterval(this.setIntervalId)
        },

        destroyed () {
            console.log('destroyed()')
        },

        methods: {
            destoryVm () {
                //干掉vm
                this.$destroy()
            }
        }
    })

</script>

</body>
</html>